<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="'新建维修单'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="会员">
            <div class="flex align-center justify-between">
              <a-input-search
                placeholder="请输入"
                class="flex1 margin-right-10"
                v-model:value="form.name"
                @search="searchMember"
              />
              <div
                class="add-btn flex align-center justify-center"
                style="width: 32px"
                >+</div
              >
            </div>
          </a-form-item>
          <a-form-item label="会员信息">
            <div class="solid padding-6">
              <div class="flex align-center">
                <a-image :width="30" :height="30" :src="form.thumb_url" />
                <div class="flex1 margin-left-15">
                  <div class="fs-12">姓名(昵称)</div>
                  <div class="fs-12 margin-top-10">手机号：15900000000</div>
                </div>
              </div>
            </div>
          </a-form-item>
          <a-form-item label="维修项目">
            <a-select
              optionFilterProp="label"
              :options="repairOptions"
              allow-clear
              v-model:value="form.repair_item_code"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="原消费单">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.origin_order_sn"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="取货方式">
            <a-select
              optionFilterProp="label"
              :options="getOptions"
              allow-clear
              v-model:value="form.receive_type"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="出生日期">
            <a-date-picker
              class="ele-fluid"
              valueFormat="YYYY/MM/DD"
              placeholder="请选择出生日期"
              v-model:value="form.sales_time"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="货品条码">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.bar_code"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="货重(g)">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.piece_weight"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="成色">
            <a-select
              optionFilterProp="label"
              :options="qualityOptions"
              allow-clear
              v-model:value="form.quality_code"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="主石名称">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.main_stone_name"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="主石颜色">
            <a-select
              optionFilterProp="label"
              :options="gemattributeOpt1"
              allow-clear
              v-model:value="form.main_stone_color"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="主石切工">
            <a-select
              optionFilterProp="label"
              :options="gemattributeOpt2"
              allow-clear
              v-model:value="form.main_stone_cut"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="故障描述">
            <a-textarea
              allow-clear
              v-model:value="form.desc"
              placeholder="请输入"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="图片">
            <a-upload
              name="attachment"
              v-model:file-list="images2"
              :limit="5"
              :action="uploadUrl"
              list-type="picture-card"
              @change="uploadHandler2"
              :show-upload-list="false"
            >
              <img
                v-if="imageUrl"
                :src="imageUrl"
                style="width: 100%"
                alt="example"
              />
              <div v-else>
                <loading-outlined v-if="loading" />
                <plus-outlined v-else />
              </div>
            </a-upload>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="货品名称">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.name"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="货品小类">
            <a-select
              optionFilterProp="label"
              :options="subclassOptions"
              allow-clear
              v-model:value="form.subclass_code"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="品类">
            <a-select
              optionFilterProp="label"
              :options="classesOptions"
              allow-clear
              v-model:value="form.classes_code"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="主石重(t)">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.main_stone_weight"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="主石净度">
            <a-select
              optionFilterProp="label"
              :options="gemattributeOpt1"
              allow-clear
              v-model:value="form.main_stone_neatness"
              placeholder="请选择"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="货品估价">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.evaluate"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea
              allow-clear
              v-model:value="form.note"
              placeholder="请输入"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { uploadUrl } from '@/config/setting';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import selectMember from '../../../order/jewelry_order/components/select-member.vue';
  import {
    get_role_select,
    get_repair_item_select,
    get_quality_select,
    get_gem_attribute_select,
    get_classes_select,
    get_subclass_select
  } from '@/api/material/select';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean
  });

  const emit = defineEmits(['done', 'update:visible']);

  const repairOptions = ref([]);
  const qualityOptions = ref([]);
  const gemattributeOpt1 = ref([]);
  const gemattributeOpt2 = ref([]);
  const gemattributeOpt3 = ref([]);
  const classesOptions = ref([]);
  const subclassOptions = ref([]);
  const getOptions = ref([
    { value: '1', label: '自提' },
    { value: '2', label: '快递' }
  ]);
  onMounted(() => {
    get_repair_item_select({ page: 1, page_size: 99999 }).then((res) => {
      repairOptions.value = res;
    });
    get_quality_select({ page: 1, page_size: 99999 }).then((res) => {
      qualityOptions.value = res;
    });
    get_classes_select({ page: 1, page_size: 99999 }).then((res) => {
      classesOptions.value = res;
    });
    get_subclass_select({ page: 1, page_size: 99999 }).then((res) => {
      subclassOptions.value = res;
    });
    get_gem_attribute_select({
      page: 1,
      page_size: 9999,
      filters: { type: 'color' }
    }).then((res) => {
      gemattributeOpt1.value = res;
    });
    get_gem_attribute_select({
      page: 1,
      page_size: 9999,
      filters: { type: 'neatness' }
    }).then((res) => {
      gemattributeOpt2.value = res;
    });
    get_gem_attribute_select({
      page: 1,
      page_size: 9999,
      filters: { type: 'cut' }
    }).then((res) => {
      gemattributeOpt3.value = res;
    });
  });

  const searchMember = (e) => {
    memberVal.value = e;
    showMember.value = true;
  };

  const imageUrl = ref('');

  // 头像上传
  const images = ref([]);
  // 营业执照上传
  const images2 = ref([]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      imageUrl.value = data.path;
      form.logo = data.id.toString();
    }
  };
  const uploadHandler2 = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      imageUrl2.value = data.path;
      form.business_license = data.id.toString();
    }
  };

  // 提交状态
  const loading = ref(false);

  // 表单数据
  const form = reactive({
    user_id: '',
    name: '',
    account: '',
    password: '',
    store_code: '',
    status: '',
    main_role: null,
    code: '',
    age: '',
    sex: null,
    birthday_date: '',
    employment_date: '',
    formal_date: '',
    leave_date: '',
    work_status: null,
    mobile: '',
    qq: '',
    email: '',
    contact_name: '',
    contact_mobile: '',
    id_card: '',
    residence_address: '',
    live_address: ''
  });
  // 表单验证规则
  const rules = reactive({
    name: [
      {
        required: true,
        message: '请输入用户名',
        type: 'string',
        trigger: 'blur'
      }
    ],
    mobile: [
      {
        required: true,
        message: '请输入手机号',
        type: 'string',
        trigger: 'blur'
      }
    ],
    main_role: [
      {
        required: true,
        message: '请选择角色',
        type: 'string',
        trigger: 'blur'
      }
    ],
    account: [
      {
        required: true,
        message: '请输入登录用户名',
        type: 'string',
        trigger: 'blur'
      }
    ],
    password: [
      {
        required: true,
        message: '请输入登录密码',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);
  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        if (form.status.indexOf('是') >= 0 || form.status.indexOf('否') >= 0) {
          form.status = form.status == '是' ? '1' : '0';
        }
        emit('done', form);
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
